<template>
  <i-col :lg="5" :md="5" :sm="12" :xs="12" class="margin-top-20">
    <Form :model="bind" :rules="ruleValidate" :label-width="90" ref="form">
      <FormItem label="所属门店：">{{ bind.store_name }}</FormItem>
      <FormItem prop='category' label="终端类型：" class="ivu-form-item-required">
        <Select v-model="bind.category" @on-change="handleChangeName">
          <Option v-for="item in categorys" :key="item.category" :value="item.category">{{ item.category_name }}</Option>
        </Select>
      </FormItem>
      <FormItem label="终端名称：" prop='device_id' class="ivu-form-item-required">
        <Select v-model="bind.device_id">
          <Option v-for="item in device" :key="item.id" :value="item.id">{{ item.name }}</Option>
        </Select>
      </FormItem>
      <FormItem label="终端SN码：" prop="device_sn">
        <i-input v-model="bind.device_sn"></i-input>
      </FormItem>
      <FormItem label="客户云密码：" prop="pwd" v-if="bind.category === 2">
        <i-input v-model="bind.pwd"></i-input>
      </FormItem>
      <FormItem label="终端备注：">
        <i-input type="textarea" :row="6" v-model="bind.remarks"></i-input>
      </FormItem>
    </Form>
    <i-button class="fr" type="primary" @click="handleClickBind">确认绑定</i-button>
  </i-col>
</template>

<script>
import { bindTerminal, bindTerminalInit, TerminalBindStoreInit, bindTerminalDropInit } from '@/api/terminal';

export default {
  name: 'bindTerminal',
  data() {
    const isNull = (rule, value, callback) => {
      if (!value) {
        callback(new Error('必须选择哦~'))
      } else {
        callback()
      }
    }
    return {
      categorys: [],
      device: [],
      bind: {
        pwd: '',
        store_name: '',
        category: '',
        device_sn: '',
        device_id: '',
        remarks: '',
        device_category: ''
      },
      ruleValidate: {
        device_id: [{ validator: isNull, trigger: 'change' }],
        category: [{ validator: isNull, trigger: 'change' }],
        device_sn: [{ required: true, trigger: 'blur', message: '必须输入哟~' }]
      }
    }
  },
  methods: {
    handleDocumentInit() {
      bindTerminalInit().then(res => {
        if (res.data.code === 0) {
          this.categorys = res.data.data.category
        } else {
          this.$Message.error(res.data.message)
        }
      })
      TerminalBindStoreInit(this.$route.query.store_id).then(res => {
        if (res.data.code === 0) {
          this.bind.store_name = res.data.data.store_name
        } else {
          this.$Message.error(res.data.message)
        }
      })
    },
    handleClickBind() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          bindTerminal(this.$route.query.store_id, this.bind).then(res => {
            if (res.data.code === 0) {
              this.$Message.success(res.data.message)
              this.$router.go(-1)
            } else {
              this.$Message.error(res.data.message)
            }
          })
        }
      })
    },
    handleChangeName(v) {
      bindTerminalDropInit(v).then(res => {
        if (res.data.code === 0) {
          this.bind.device_id = ''
          this.device = res.data.data.device
        } else {
          this.$Message.error(res.data.message)
        }
      })
    }
  },
  created() {
    this.handleDocumentInit()
  }
}
</script>

<style lang="less" scoped>
  @import '../terminal.less';
</style>
